<template>
  <div class="mapContainer">
    <div class="companyContain">
      <img src="../assets/列表.png" alt="" v-if="!showCompany" @click="showCompany=true" style="width: 60px; height: 60px">
      <Companys v-else @close-company="showCompany=false" @update="updata"></Companys>
    </div>
    <div class="echartContain">
      <img src="../assets/饼图图表.png" alt="" v-if="!showChart" @click="showChart=true" style="width: 100px; height: 100px">
      <Echart v-else @close-echart="showChart=false"></Echart>
    </div>
    <div class="labels">
      <span class="iconfont icon-map-marker marker0" style="z-index: 999; font-size: 10px;">正常</span>
      <span class="iconfont icon-map-marker marker1" style="z-index: 999; font-size: 10px;">异常</span>
      <span class="iconfont icon-map-marker marker2" style="z-index: 999; font-size: 10px;">超标</span>
      <span class="iconfont icon-map-marker marker3" style="z-index: 999; font-size: 10px;">掉线</span>
      <span class="iconfont icon-map-marker marker4" style="z-index: 999; font-size: 10px;">停运</span>
    </div>
    <el-skeleton style="width: 100%; height: 100%" :loading="loading" animated>
      <template #template>
        <el-skeleton-item variant="image" style="width: 100%; height: 100%" />
        <div style="padding: 14px">
          <el-skeleton-item variant="h3" style="width: 100%" />
          <div style="
            display: flex; 
            align-items: center;
            justify-items: space-between;
            height: 100%;
          ">
          </div>
        </div>
      </template>
    </el-skeleton>
    <div id="container">
      
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
import http from '../http/http'
import Echart from '@/components/Echart.vue';
import Companys from '@/components/Companys.vue';
import { useStore } from "vuex"
export default defineComponent({
  name: 'HomeView',
  components: {
    Echart: Echart,
    Companys: Companys
  },
  setup() {
    let map: any = null
    let loading = ref(true);
    let showChart = ref(false);
    let showCompany = ref(false);
    const markers = [
      {
        position: [114.28666, 30.557865],
        title: "污染源1",
        type: 1,
      },
      {
        position: [114.28766, 30.557865],
        title: "污染源2",
        type: 2,
      },
      {
        position: [114.28864, 30.557865],
        title: "污染源3",
        type: 3,
      },
      {
        position: [114.28966, 30.557865],
        title: "污染源4",
        type: 4,
      },
      {
        position: [114.29066, 30.557865],
        title: "污染源5",
        type: 5,
      }
    ]
    const store = useStore()
    store.commit('getTotalCom',100)
    store.commit('getImportantCom',50)
    let comData = ref()
    let comlength = ref(0)
    let getData = ()=>{
    http.get('/api/company/list').then((res)=>{
        // console.log(res)
        if(res.data.code<300){
          comData.value = res.data.records
          comlength.value = comData.value.length
          store.commit('getList', comData.value)
          store.commit('getTotalCom',comlength.value)
        }
        getImportance(comData.value)
        AMapLoader.load({
        key: "32d726fcb0d8b7a864793edc78986e68", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          AMap = AMap
          map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 13, // 初始化地图级别
            center: [114.28674, 30.557865], // 初始化地图中心点位置
          });
          loading.value = false
          setMarkers(AMap)
        })
        .catch((e) => {
          console.log(e);
        });
    })
    }
    getData()
    onMounted(() => {
      
    });
    let setMarkers = (AMap: any) => {
      for (let i = 0; i < comData.value.length; i++) {
        let marker = new AMap.Marker({
          position: new AMap.LngLat(
            ...comData.value[i].comLocation.split(',')
          ),
          title: comData.value[i].comName,
          content: '' + '<span class="iconfont icon-map-marker marker' + comData.value[i].comState + '"></span>',
          offset: new AMap.Pixel(-15, -30)
        })
        map.add(marker)
      }
    }
    let updata = (data:any)=>{
      comData.value = data
      comlength.value = comData.value.length
      store.commit('getList', comData.value)
      store.commit('getTotalCom',comlength.value)
      getImportance(comData.value)
      AMapLoader.load({
        key: "32d726fcb0d8b7a864793edc78986e68", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          AMap = AMap
          let el = document.getElementById('container')
          if(el) el.innerHTML = ''
          map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 13, // 初始化地图级别
            center: [114.28674, 30.557865], // 初始化地图中心点位置
          });
          loading.value = false
          setMarkers(AMap)
        })
      // console.log(comData.value)
      // console.log(comlength.value)
      // console.log(store.state.list)
      // console.log(store.state.totalCom)
    }
    let importantCom = ref(0)
    let getImportance = (comData:any)=>{
      let importance = 0
      for(let i = 0; i < comData.length; i++){
        if(comData[i].comImportance==1) importance++
      }
      importantCom.value = importance
      store.commit('getImportantCom',importance)
    }
    onUnmounted(() => {
      map?.destroy();
    });
    
    return {
      loading,
      showChart,
      showCompany,
      updata
    }
  }
});
</script>
<style>
.mapContainer {
  position: relative;
  width: 90%;
  height: 90%;
  margin: 20px auto;
}

#container {
  width: 100%;
  height: 100%;
  position: relative;
}
.echartContain {
  position: absolute;
  right: 0;
  z-index:999;
}
.companyContain {
  position: absolute;
  left: 0;
  z-index:999;
}
.labels{
  width: 300px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 15px;
  background: #fff;
  position: absolute;
  right: 0;
  bottom: 10px;
  z-index:999;
}
.marker0 {
  color: blue;
}

.marker1 {
  color: orange
}

.marker2 {
  color: red
}

.marker3 {
  color: gray
}

.marker4 {
  color: black
}
</style>
